<template>
  <div class="myPage">
    <div style="display:flex;justify-content: space-between;">
      <div>
        办理计划
      </div>
      <div>
        <el-button type="text" @click="link" style="line-height: 10px">
          <span class="iconfont icon-ai207"></span>
          返回
        </el-button>
      </div>
    </div>
    <hr style="height: 1px;border: 0;background: #eee;margin-bottom: 10px"/>
    <!--    <div>{{tableData}}</div>-->
    <search-form ref="search" @delTag="delBat" :keys="keys" @sub="search"
                 @add="add" @planTag="planTag"></search-form>
    <el-table
        :data="tableData"
        ref="table"
        @selection-change="handleSelectionchangeS"
        style="width: 100%">
      <el-table-column
          :row-key="getRowKeys"
          :reserve-selection="true"
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column
          prop="date"
          label="序号"
          width="150">
        <template slot-scope="scope">
          <span>{{scope.$index+1}}</span>
        </template>
      </el-table-column>
      <el-table-column
          v-if="'1'===status||'3'===status"
          prop="cntrno"
          label="箱号"
          width="120">
      </el-table-column>
      <el-table-column
          v-if="'3'===status"
          prop="cntrno"
          label="船公司模型"
          width="120">
      </el-table-column>
      <el-table-column
          v-if="'1'===status"
          prop="goods.billno"
          label="提单号"
          width="120">
      </el-table-column>
      <el-table-column
          v-if="'1'===status"
          prop="cszCsizecd"
          label="尺寸"
          width="120">
      </el-table-column>
      <el-table-column
          v-if="'1'===status"
          prop="ctypecd"
          label="箱型"
          width="120">
      </el-table-column>
      <el-table-column
          v-if="'1'===status||'3'===status"
          prop="cstCopercd"
          label="持箱人"
          width="120">
      </el-table-column>
      <el-table-column
          v-if="'3'===status"
          prop="cntrno"
          label="贸易类型"
          width="120">
      </el-table-column>
      <el-table-column
          v-if="'3'===status"
          prop="cntrno"
          label="坏/污"
          width="120">
      </el-table-column>
      <el-table-column
          v-if="'3'===status"
          prop="cntrno"
          label="附加操作"
          width="120">
      </el-table-column>
      <el-table-column
          v-if="'3'===status"
          prop="所属码头"
          label="坏/污"
          width="120">
      </el-table-column>
      <el-table-column
          v-if="'3'===status"
          prop="cntrno"
          label="作业区"
          width="120">
      </el-table-column>
      <el-table-column
          v-if="'1'===status"
          prop="cweight"
          label="箱货总重（吨）"
          width="120">
      </el-table-column>
      <el-table-column
          v-if="'1'===status"
          prop="goods.gname"
          label="货名"
          width="120">
<!--        <template slot-scope="scope">
          <span>{{scope.row.containerGoodList[0].planGoods.gname}}</span>
        </template>-->
      </el-table-column>
      <el-table-column
          v-if="'1'===status"
          prop=""
          label="污箱标记"
          width="120">
      </el-table-column>
      <el-table-column
          v-if="'1'===status"
          prop=""
          label="残损标记"
          width="120">
      </el-table-column>
      <template slot="empty">
        <!--        <img src="../../../assets/empty.png" style="width: 300%;"/>-->
        <div style="width: 1000px;height: 500px;line-height: 500px">暂无数据</div>
      </template>
    </el-table>
    <el-dialog
        :title="title"
        :before-close="cancelForm"
        :visible.sync="dialog"
        custom-class="demo-drawer"
        ref="drawer">
      <div class="demo-drawer__content" style="display: flex;flex-wrap: wrap;
      flex-direction: column;align-content: space-around">
        <form-list v-if="listKeys.includes('form5')" :showEd="!see" @cal="dialog=false" @sub="submit" ref="formList" :keys="listKeys"></form-list>
        <form-list2 v-if="'PE_WC'===planTagS" v-show="!showT" :showEd="!see" @cal="dialog=false"
                    @sub="showT=true" ref="formList2" :keys="listKeys"></form-list2>
        <form-list v-show="showT" :showEd="!see" @cal="dialog=false"
                   @sub="submit" ref="formList1" :keys="['form8']"></form-list>
      </div>
    </el-dialog>
    <div style="display: flex;flex-direction: row-reverse;margin-top: 10px">
      <el-pagination
          background
          :total="5"
          layout="prev, pager, next">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import searchForm from "@/views/businessProcessing/module/searchForm";
import formList from "@/views/businessProcessing/unloadLift/moudel/formList";
import formList2 from "@/views/businessProcessing/unloadLift/moudel/formList2";
import formList3 from "@/views/businessProcessing/unloadLift/moudel/formList3";
import moment from "moment";
/*
* PFRE   	提重返空
PERF_WC	提空返重（指定箱号）
PE_WC  	提空箱（指定箱号）
PF     	提重箱
BOX	装箱
UNBOX	拆箱

* */
export default {
  name: "bulkCargo",
  components:{
    searchForm,
    formList,
    formList2,
    formList3,
  },
  data() {
    return {
      planTagList:{
        PFRE:'提重返空',
        PERF_WC:'提空返重（指定箱号）',
        PE_WC:'提空箱（指定箱号）',
        PF:'提重箱',
        BOX:'装箱',
        UNBOX:'拆箱',
      },
      showT:false,
      listKeys:[],
      status:'1',
      quSee:false,
      goodsType:[],
      ships:[],
      out:false,
      page:0,
      pageSize:10,
      workKey:[],
      keys:['form1'],
      active:'1',
      title:'新增',
      loading:false,
      formLabelWidth:200,
      form:{},
      dialog:false,
      tableData: [],
      tableData1:[],
      tableData2:[],
      selection:[],
      tag:'',
      formList:{},
      see:false,
      myTable:[],
      planTagS:'',
    };
  },
  mounted() {
    this.getInfo()
    this.setTag()
  },
  watch:{

  },
  destroyed() {
    //localStorage.setItem('myDate','')
  },
  methods:{
    search(){
      let par={
        termCode:'',
        planTag:this.planTagS
      }
      let pars=this.$refs.search.form
      par=Object.assign(par,pars)
      this.$api.tosGetContainer(par).then(res=>{
        this.tableData=res.data
        if(this.tableData.length>0&&this.tableData[0].containerGoodList.length>0){
          this.tableData.forEach((item,index)=>{
            this.tableData[index].goods=item.containerGoodList[0].planGoods
          })
        }
        this.$forceUpdate()
      }).catch(res=>{
        this.tableData=[]
      })
    },
    delBat(){

      let s = this.selection
      if(0===s.length){
        this.$message.error('请先选择货物！')
        return;
      }
      //console.log(s)
      //return
      //console.log(e.$index)
      let that=this
      this.$refs.table.clearSelection()
      this.selection=[]
      this.$confirm('确定要删除货物吗？')
          .then(_ => {
            if('1' === that.active){
              that.tableData.forEach((item,index)=>{
                s.forEach(item1=>{
                  if(JSON.stringify(item1) === JSON.stringify(item)){
                    that.tableData.splice(index,1)
                    that.tableData=that.tableData1
                  }
                })
              })
            }
            if('2' === that.active){
              that.tableData2.forEach((item,index)=>{
                s.forEach(item1=>{
                  if(JSON.stringify(item1) === JSON.stringify(item)){
                    that.tableData2.splice(index,1)
                    that.tableData=that.tableData2
                  }
                })
              })
            }
            this.$message.success('批量删除成功！')
          })
          .catch(_ => {});

    },
    changeS(e){
      /*console.log(9999999)
      console.log(e)*/
      this.$nextTick(() => {
        if(undefined!==e.planBulkGoods.planContainerGoods.gcentwg&&
            0!==e.planBulkGoods.planContainerGoods.gcentwg&&
            0!==e.planBulkGoods.planContainerGoods.gcentpks){
          //这里把数据重新赋值一下，不然就会出现bug，从第一页翻到第二页可以保留，在回到第一页选中的就没了
          this.$refs.table.toggleRowSelection(e, true);
          //this.$forceUpdate()
        }else{
          this.$refs.table.toggleRowSelection(e, false);
        }
      });
    },
    getGoods(){
      this.out = true
      this.tableData=[]
      this.$api.tosGetGoods({
        "planTag": this.tag,
        "termCode": "HX"
      }).then(res=>{
        res.data.forEach(item=>{
          let c={planBulkGoods:item}
          c.planBulkGoods.planContainerGoods={}
          c.planBulkGoods.planContainerGoods={
            gcentpks:0,//item.gtpks,
            gcentpksMax:item.gtpks,
            gcentwg:0,//item.gtwg
            gcentwgMax:item.gtwg
          }
          this.tableData.push(c)
        })
        console.log()
        this.tableData2.forEach(item=>{
          this.myTable.push(item)
        })
        //this.myTable=Object.assign(this.myTable,this.tableData2)
        if(0!==this.myTable.length){
          this.tableData.forEach(item=>{
            this.myTable.forEach(item1=>{
              if(item.planBulkGoods.bulkGId===item1.planBulkGoods.bulkGId){
                //console.log(1111)
                item.planBulkGoods.planContainerGoods=item1.planBulkGoods.planContainerGoods
              }else{
                //console.log(22222)
              }
            })
          })
        }
        this.$forceUpdate()
      }).catch()
    },
    setTag(){
      let tag = null
      let par=this.$route.query.path
      this.planTagS=''
      //console.log(this.$route.query)
      if(par==='TZFK'){
        this.status='1'
        this.keys=['hmh','myl','tdh','xh','import','out']
        this.listKeys=['form5']
        this.planTagS='PFRE'
        //this.$refs.formList.form.planTag='PFRE'
      }
      if(par==='TKFZ'){
        this.status='2'
        this.keys=['hmh','myl','tdh','xh','import','out']
        this.listKeys=['form6']
      }
      if(par==='TKFZ_Appoint'){
        this.status='3'
        this.keys=['mt','out','xh']
        this.listKeys=['form6']
        this.planTagS='PE_WC'
        //this.$refs.formList.form.planTag='PE_WC'
      }
      this.tag=tag



      if(''!==localStorage.getItem('myDate')){

        let c=JSON.parse(localStorage.getItem('myDate'))
        /*console.log('ppppppp')
        console.log(c)*/
        let that=this
        this.$nextTick(() => {
          that.$refs.search.getPer()
          if(null!==c.termCode){
            that.$refs.search.form.termCode=c.termCode
          }
          if(null!==c.vslCd){
            that.$refs.search.form.vslCd=c.vslCd
          }
          /*console.log(88888)
          console.log(c)
          console.log(that.$refs.search.form)*/
          that.$forceUpdate()
        })

        c.planBulkGoods.forEach((item,index)=>{
          this.tableData.push({
            planBulkGoods:item,
            plansExt:c.plansExt,
            edit:1
          })
          //this.$refs.table.toggleRowSelection(this.tableData[index], true);
          /*this.$refs.table.toggleRowSelection(item, true);
          this.$forceUpdate()*/
        })
        /*console.log(9999999)
        console.log(this.tableData[0])
        console.log(this.tableData.length>0&&null!==this.tableData[0].planBulkGoods)*/

        if(this.tableData.length>0&&null!==this.tableData[0].planBulkGoods){
          this.tableData.forEach(item=>{
            console.log(666)
            console.log(item.planBulkGoods.morphology)
            if('HWXT_JZH'===item.planBulkGoods.morphology){
              this.tableData2.push(item)
              //this.active='2'
              //console.log(3333)
            }else{
              this.tableData1.push(item)
              //this.active='1'
              //console.log(2222222)
            }
          })
          this.tableData= JSON.parse(JSON.stringify(this.tableData1))
          this.active='1'
        }else{

        }

        try {
          this.formList=c
        }catch (e) {
          console.log(e)
        }
        if('loadIn'===this.$route.query.path||'output'===this.$route.query.path) {
          this.myTable = JSON.parse(JSON.stringify(this.tableData))
          this.getGoods()
        }
        //console.log(c)
      }else if('loadIn'===this.$route.query.path||'output'===this.$route.query.path){
        this.getGoods()
      }
    },
    getInfo(){
      console.log(11111)
      console.log(this.$route.query)
      this.quSee=this.$route.query.type
      this.see = this.quSee || 'true' === this.quSee;
      if('loadIn'===this.$route.query.path||'output'===this.$route.query.path){
        this.workKey=['work','shipName','comType','num','out']
      }else{
        this.workKey=['work','shipName','comType','num','ship1','out']
      }
    },
    submit(){
      /*console.log(this.$refs.formList.form)
      if(this.listKeys.includes('form8')){
        this.listKeys=['form6']
      }*/

      let form={}
      if(this.listKeys.includes('form5')){
        form=JSON.parse(JSON.stringify(this.$refs.formList.form))
        form.planContainers=JSON.parse(JSON.stringify(this.selection))
        form=Object.assign(JSON.parse(JSON.stringify(this.$refs.search.form)),form)
      }else{
        form = Object.assign(JSON.parse(JSON.stringify(this.$refs.formList1.form)),
            JSON.parse(JSON.stringify(this.$refs.formList2.form)))
        form.planContainers=JSON.parse(JSON.stringify(this.selection))
        form=Object.assign(JSON.parse(JSON.stringify(this.$refs.search.form)),form)
      }

      if(null!==form.id){
        this.$api.shipE(form,this.$route.query.path+'_Add').then(res=>{
            if(200===res.code){

            }
        }).catch()
      }else{
        this.$api.shipE(form,this.$route.query.path+'_Edit').then(res=>{

        }).catch()
      }
      //this.$api.shipE()
      //this.dialog=false
      /*console.log(this.$refs.formList.form)
      this.$api.xAdd(this.$refs.formList.form).then().catch()*/
    },
    planTag(){
      console.log(this.listKeys)
      if(0===this.selection.length){
        this.$message.error('请选择数据！')
        this.dialog=false
        return
      }

      if(!this.quSee||'false'===this.quSee){
        this.see=false
      }else{
        this.see=true
      }
      /*console.log()
      console.log(this.see)
      return;*/
      /*if(!this.quSee&&undefined===this.formList.id){
        this.see=false
      }else this.see = !(undefined !== this.formList.id && null !== this.formList.id);*/

      //this.keys=['form2']

      this.title='生成计划'
      this.dialog=true
      this.$nextTick(res=>{
        //this.$refs.formList.form.plansExt.createUser='admin'
        //this.$refs.formList.getDateList()
        this.$refs.formList.form.planTag=this.planTagS
        this.$refs.formList1.form.planTag=this.planTagS
        this.$refs.formList2.form.planTag=this.planTagS
        console.log(99999)
        if(undefined!==this.formList.id&&null!==this.formList.id){
          this.$refs.formList.form=this.formList
        }else{

          this.$refs.formList.form= {
            termCode:'HX',
            returnTermcd:'HX',
            opsttm:moment(new Date()).format('YYYY-MM-DD HH:mm:ss'),
            opedtm:moment(new Date()).add(7,"days").format('YYYY-MM-DD HH:mm:ss'),
            vanUseRequirements:{},
            plansExt:{},
            planReturn:{}
          }
        }
        this.$forceUpdate()
      })
    },
    add(){
      this.see=false
      //this.keys=['form1']
      this.title='新增'
      this.dialog=true
      this.$nextTick(res=>{

      })
    },
    handleSelect(e){
      console.log(e)
      this.active=e
      console.log(e)
      if('1'===e){
        console.log(777)
        this.tableData=this.tableData1
        this.keys=['form1']
      }
      if('2'===e){
        console.log(888)
        this.tableData=this.tableData2
        this.keys=['form3']
      }
      //console.log(this.active)
    },
    link(){
      this.$router.back()
    },
    cancelForm() {
      //this.keys=['form1']
      this.loading = false;
      this.dialog = false;
      /*this.$refs.formList.form={
        default: () => []
      }*/
      //clearTimeout(this.timer);
    },
    del(e){
      console.log(e.$index)
      let that=this
      this.$refs.table.clearSelection()
      this.selection=[]
      this.$confirm('确定要删除货物吗？')
          .then(_ => {
            if('1' === that.active){
              that.tableData1.splice(e.$index,1)
              that.tableData=that.tableData1
            }
            if('2' === that.active){
              that.tableData2.splice(e.$index,1)
              that.tableData=that.tableData2
            }
            this.$message.success('删除成功！')
          })
          .catch(_ => {});

    },
    handleClick(row,e) {
      if('1'===this.active){
        this.keys=['form1']
      }
      if('2'===this.active){
        this.keys=['form3']
      }
      //this.keys=['form1']
      console.log(row);
      row.edit=1
      //console.log('ppppppp')
      if('see'!==e){
        this.title='编辑'
        this.see=false
      }else{
        this.title='查看'
        this.see=true
      }
      this.dialog=true
      this.$nextTick(res=>{
        this.$refs.formList.getGoods()
        this.$refs.formList.form=row//JSON.parse(JSON.stringify(row))
      })
    },
    handleSelectionchangeS(val) {
      this.selection = val;
      //this.$refs.table.toggleRowSelection(val, true);
    },
    getRowKeys(row) {
      return row.id
    },
  },
}
</script>

<style scoped lang="less">
.el-menu-item {
  height: 39px;
  line-height: 39px;
}
.el-menu{
  border: none;
  background: transparent;
}
.el-menu::after{
  border: none;
  background: transparent;
}
.myPage{
  background: #fff;
  padding: 10px 20px 20px 20px;
  border-radius: 6px;
  min-height: 660px;
}
/deep/ .el-table__empty-block {
  justify-content: flex-start!important;
}
</style>
